<template>
  <div class="home">
    <gltitle
      :is_mt="true"
      :is_notice="false"
      :is_back="true"
      :is_name="true"
      :title="title"
    ></gltitle>

    <div class="container">
      <div class="assets">
        <div class="n">{{ $t("page4.doc8") }}(USDT)</div>
        <div class="am">{{ userData.pendingIncome | Svalues }}</div>
      </div>

      <div class="sp">
        <div>{{ $t("page4.doc34") }}</div>
      </div>
      <!--      <div class="rules-info" v-html="tipsInfo.description"></div>-->
      <div>
        <ul class="list">
          <li class="first">
            <div class="lists1">
              <img class="p1" src="../../assets/images/Group40.png" alt="" />
              <div class="title">{{ $t("page4.doc35") }}</div>
              <div class="con">{{ $t("page4.doc36") }}</div>
            </div>
            <div class="lists2">
              <img class="p2" src="../../assets/images/Group43.png" alt="" />
            </div>
            <div class="lists1">
              <img class="p1" src="../../assets/images/Group41.png" alt="" />
              <div class="title">{{ $t("page4.doc37") }}</div>
            </div>
            <div class="lists2">
              <img class="p2" src="../../assets/images/Group43.png" alt="" />
            </div>
            <div class="lists1">
              <img class="p1" src="../../assets/images/Group42.png" alt="" />
              <div class="title">{{ $t("page4.doc38") }}</div>
              <div class="con">{{ $t("page4.doc39") }}</div>
            </div>
          </li>
          <li class="part">
            <div class="icon">
              <img src="../../assets/images/Group44.png" alt="" />
            </div>
            <div class="name">
              <div class="time">
                <div>{{ $t("page4.doc8") }}：</div>
                <p>{{ $t("page4.doc40") }}</p>
              </div>
            </div>
          </li>
          <li class="part">
            <div class="icon">
              <img src="../../assets/images/Group45.png" alt="" />
            </div>
            <div class="name">
              <div class="time">
                <div>{{ $t("page4.doc41") }}</div>
                <p>{{ $t("page4.doc411") }}</p>
                <p>{{ $t("page4.doc412") }}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: this.$t("page4.doc8"),
      tipsInfo: {},
    };
  },
  computed: {
    userData() {
      return this.$store.state.userData;
    },
  },
  mounted() {
    this.getTipsInfo();
  },
  filters: {
    Svalues(value) {
      if (value) {
        return Number(value.toString().match(/^\d+(?:\.\d{0,2})?/));
      }
    },
  },
  methods: {
    async getTipsInfo() {
      const url = this.URL.home.article;
      const params = { categoryType: "DECAYREWARDRULES" };
      const res = await this.$post(url, params);
      if (res.code != 0) return;
      this.tipsInfo = res.data;
    },
  },
};
</script>

<style lang="less" scoped>
.assets {
  //padding: .36rem;
  text-align: center;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: var(--COcolor3);
  text-shadow: 0rem 0.1rem 0.2rem rgba(10, 10, 10, 0.1);
  // background: var(--CObackgroundLinear1);
  background: linear-gradient(180deg, #f8f8e0 0%, #f5b975 100%);
  border-radius: 0.2rem;
  margin-top: 0.22rem;
  position: relative;
  height: 2.32rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.44rem;

  * {
    color: #000 !important;
  }

  .icon {
    position: absolute;
    top: 0.32rem;
    left: 0.32rem;

    img {
      height: 0.48rem;
    }
  }

  .n {
    //line-height: .4rem;
    //margin-bottom: .44rem;
    //margin-top: 0.52rem;
    color: var(--COcolor3);
  }

  .am {
    font-size: 0.72rem;
    color: var(--COcolor3);
    line-height: 0.73rem;
  }
}

.record_hdrecord_hd {
  margin-top: 0.36rem;

  .flex1 {
    font-size: 0.32rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 0.42rem;
    white-space: nowrap;
  }

  .set {
    background: url("../../assets/images/ico_la.png") no-repeat right center;
    background-size: 0.16rem auto;
    padding-right: 0.3rem;
    margin-left: 0.5rem;
    font-size: 0.24rem;
  }
}

.itemBox {
  margin-top: 0.3rem;
  margin-bottom: 1rem;

  li {
    border-bottom: 0.02rem solid #47464a;
    padding: 0 0 0.2rem 0;
    margin-bottom: 0.2rem;

    &:last-child {
      margin-bottom: 0;
      border: 0;
      padding-bottom: 0;
    }

    .s {
      text-align: right;
    }

    .time {
      font-size: 0.24rem;
    }
  }
}

.footer_but {
  position: fixed;
  bottom: 0;
  left: auto;
  max-width: 10rem;
  width: 100%;
  background: #2b2b37;

  .fo {
    display: flex;

    .item {
      font-size: 0.32rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.28rem 0rem;

      img {
        height: 0.4rem;
        margin-right: 0.08rem;
      }
    }

    .item:first-child {
      border-right: 0.02rem solid #474652;
    }
  }
}

.rules-info {
  margin: 0.32rem 0;
  padding: 0.3rem 0.32rem;
  background: #232532;
  border-radius: 0.24rem;

  :deep(p) {
    height: inherit;

    img {
      max-width: 100%;
      height: inherit !important;
    }
  }
}

.list_title {
  color: #ffc9a8;
  text-align: center;
  font-family: PingFang HK;
  font-size: 0.36rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.sp {
  font-weight: 600;
  font-size: 0.32rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85%;
  margin: 0.32rem auto;

  div {
    text-align: center;
  }

  &:before {
    content: " ";
    display: inline-block;
    width: 0.64rem;
    height: 0.34rem;
    background: url("../../assets/images/sp.png") no-repeat;
    background-size: 100% 100%;
  }

  &:after {
    content: " ";
    display: inline-block;
    width: 0.64rem;
    height: 0.34rem;
    background: url("../../assets/images/sp.png") no-repeat;
    background-size: 100% 100%;
    transform: rotateY(180deg);
  }
}

.first {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow: hidden;
  padding: 0.4rem;
  background: #26292d url("../../assets/images/bb.png") no-repeat;
  background-size: 100% 100%;
  border-radius: 0.24rem;

  & > div {
    text-align: center;
    overflow: hidden;

    .p2 {
      transform: translateY(0.2rem);
    }

    .p1 {
      height: 0.88rem;
      margin-bottom: 0.05rem;
    }

    .con {
      color: rgba(255, 255, 255, 0.5);
      text-align: center;
      /* test01.topone99999.info/Semantic/Item */
      font-family: var(--font-family-Font-1, Sora);
      font-size: var(--font-size-12, 12px);
      font-style: normal;
      font-weight: var(--font-weight-400, 400);
      line-height: var(--line-height-18, 18px); /* 150% */
    }
  }
}

.part {
  display: flex;
  gap: 0.12rem;
  margin: 0.32rem 0;

  * {
    color: rgba(255, 255, 255, 0.5);
    /* test01.topone99999.info/Semantic/Item */
    font-family: var(--font-family-Font-1, Sora);
    font-size: var(--font-size-12, 12px);
    font-style: normal;
    font-weight: var(--font-weight-400, 400);
    line-height: var(--line-height-18, 18px); /* 150% */
  }
}
</style>
